<template>
  <div>
    <div class="margin-container-list">
      <div class="top-operate pad-t-15">
        <div>
          <div class="float-l">
            <el-input @keyup.enter.native="handleSearch" v-model="dataListQuery.nickname" placeholder="微客昵称/姓名/手机号/提货地址" style="width: 400px"></el-input>
            <el-date-picker v-model="datePicker"
                            type="daterange"
                            unlink-panels
                            range-separator="至"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            :default-time="['00:00:00', '23:59:59']"
                            start-placeholder="开始时间"
                            end-placeholder="结束时间">
            </el-date-picker>
            <el-button type="primary" @click="handleSearch">查询</el-button>
            <el-button plain="" @click="resetSearch">重置</el-button>
          </div>
          <br>
        </div>
      </div>

      <!-- 内容列表 -->
      <div class="table-container">
        <el-table :data="dataList" @selection-change="handleSelectionChange" v-loading="listLoading"
                  element-loading-text="加载中" style="width: 100%" >
          <el-table-column width="55px" type="selection" ></el-table-column>
          <el-table-column min-width="240px" label="微客" prop="userInfo">
            <template slot-scope="scope">
              <div class="flex v-align-c cursor-p">
                <label><img :src="scope.row.avatar" class="user-avatar" v-if="scope.row.avatar"></label>
                <div class="font-14 pad-l-10">
                  <div>昵称：{{scope.row.nickname}}</div>
                  <div>姓名：{{scope.row.realname}}</div>
                  <div>手机：{{scope.row.phone}}</div>
                  <div>编号：{{scope.row.commanderCode}}</div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column min-width="240px" label="提货地址">
            <template slot-scope="scope">
              <a @click="dialogMapVisibleClick(scope.row)"><span style="color: blue">{{ scope.row.takeAddress }}</span></a>
            </template>
          </el-table-column>
          <el-table-column min-width="240px" label="管理小区">
            <template slot-scope="scope">
              <div v-for="(item, index) in scope.row.villages">
                {{ item.villageName }}
              </div>
            </template>
          </el-table-column>
          <el-table-column width="240px" label="创建时间" prop="createTime" ></el-table-column>
          <el-table-column width="140px" label="操作" align="right" fixed="right">
            <template slot-scope="scope">
              <el-button type="text" size="medium" @click="handleUpdate(scope.row)">编辑</el-button>
              <el-button type="text" size="medium" @click="enableDisable(scope.row, 0)" v-if="scope.row.commanderType == 1">启用</el-button>
              <el-button type="text" size="medium" @click="enableDisable(scope.row, 1)" v-if="scope.row.commanderType == 0">禁用</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 列表分页 -->
      <div class="pagination">
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                       :current-page="dataListQuery.currentPage"
                       :page-sizes="[10, 20, 50, 100]" :page-size="dataListQuery.size"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="total">
        </el-pagination>
      </div>
      <!-- 地理坐标 -->
      <el-dialog width="700px" v-el-drag-dialog title="请选择地点" :visible.sync="dialogMapVisible">
        <iframe id="mapPage" width="100%" height="600px" frameborder=0
                :src="coord">
        </iframe>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogMapVisible = false">取消</el-button>
          <el-button type="primary" @click="onSetLocation(loc)">确定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
  import { pagingCommander, saveCommander, saveCommanderType } from '@/api/user/commander'
  import elDragDialog from '@/directive/el-dragDialog'
  export default {
    directives: {
      // 拖动窗口
      elDragDialog
    },
    data() {
      return {
        total: null,
        dataList: [],
        listLoading: false,
        dialogMapVisible: false,
        dataListQuery: {
          nickname: '',
          enterpriseId: this.getEnterpriseId(),
          startTime: '',
          endTime: '',
          currentPage: 1,
          size: 10
        },
        entity: {},
        datePicker: [],
        loc: null,
        coord: ''
      }
    },
    // 初始化页面
    created() {
      window.addEventListener('message', function(event) {
        // 接收位置信息，用户选择确认位置点后选点组件会触发该事件，回传用户的位置信息
        const loc = event.data
        if (loc && loc.module === 'locationPicker') {
          // 防止其他应用也会向该页面post信息，需判断module是否为'locationPicker'
          this.loc = { ... loc }
        }
      }, false)
      this.listLoading = false
      this.initData()
    },
    mounted() {
    },
    methods: {
      handleClick() {
        this.initData()
      },
      onSetLocation() {
        console.log(window.loc)
        if (window.loc && window.loc.latlng) {
          this.entity.lng = window.loc.latlng.lng
          this.entity.lat = window.loc.latlng.lat
          this.entity.takeAddress = window.loc.poiaddress
        }
        this.saveData()
      },
      dialogMapVisibleClick(row) {
        const obj = JSON.parse(JSON.stringify(row))
        this.entity = obj
        this.coord = 'https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77&referer=web&coord=' + obj.lat + ',' + obj.lng
        this.dialogMapVisible = true
      },
      initData() {
        this.listLoading = true
        const datePicker = this.datePicker
        if (this.$utils.isExist(datePicker) && datePicker.length > 0) {
          this.dataListQuery.startTime = datePicker[0]
          this.dataListQuery.endTime = datePicker[1]
        } else {
          this.dataListQuery.startTime = ''
          this.dataListQuery.endTime = ''
        }
        pagingCommander(this.dataListQuery).then(response => {
          this.dataList = response.data.records
          this.total = response.data.total
          this.listLoading = false
        })
      },
      // 保存用户信息
      saveData() {
        if (!this.entity.lng) {
          this.$message.error('经度不能为空')
          return
        }
        if (!this.entity.lat) {
          this.$message.error('纬度不能为空')
          return
        }
        if (!this.entity.takeAddress) {
          this.$message.error('提货地址不能为空')
          return
        }
        saveCommander(this.entity).then((response) => {
          if (response.isError) return
          this.$message({
            type: 'success',
            message: '保存成功!'
          })
          this.dialogMapVisible = false
          this.initData()
        })
      },
      resetSearch() {
        this.dataListQuery = {
          nickname: '',
          enterpriseId: this.getEnterpriseId(),
          startTime: '',
          endTime: '',
          currentPage: 1,
          size: 10
        }
        this.datePicker = []
        this.initData()
      },
      // 更改当前页面大小
      handleSizeChange(val) {
        this.dataListQuery.size = val
        this.initData()
      },
      // 更改当前页数
      handleCurrentChange(val) {
        this.dataListQuery.currentPage = val
        this.initData()
      },
      // 勾选
      handleSelectionChange(val) {
        this.multipleSelection = val
      },
      // 查询
      handleSearch() {
        this.dataListQuery.currentPage = 1
        this.initData()
      },
      enableDisable(row, commanderType) {
        saveCommanderType(row.commanderId, commanderType).then(response => {
          if (response.isError) return
          this.$message({
            type: 'success',
            message: '保存成功!'
          })
          this.handleSearch()
        })
      },
      // 编辑
      handleUpdate(row) {
        this.$router.push({ path: '/village/commander/edit/index', query: { commanderId: row.commanderId }})
      }
    }
  }
</script>

<style lang="less" scoped>
  .mission-type {
    padding: 35px 38px;
    min-width: 150px;
    border: 1px solid #dcdcdc;
    border-radius: 8px;
    margin: 25px 40px;
    cursor: pointer;
    text-align: center;
    box-shadow: 0 0 5px rgba(0,0,0,0.1);
  }
  .flex-cag-box{
    padding: 0px 0px 20px 70px;
    .mission-type:nth-child(4n){
      margin-right: 0px;
    }
  }
  .next-step-btn{
    padding: 13px 35px;
    font-size: 18px;
  }

  .sel-mission-type {
    background-color: #409eff;
    color: #fff;
  }

  .budget-el-select {
    padding-top: 10px;
    padding-left: 50px;
  }

  .user-avatar{
    width: 46px;
    height: 46px;
    display: block;
    border-radius: 50px;
  }
</style>
